<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格员审批工作台 - 用户地址数据系统</title>
    <link rel="stylesheet" href="relation-styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="frame-integration.js"></script>
    <style>
        .dashboard-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 25px;
        }
        
        .stats-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            padding: 20px;
            flex: 1;
            min-width: 230px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .stats-icon {
            width: 55px;
            height: 55px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }
        
        .stats-icon-pending {
            background-color: #fff8e1;
            color: #ff9800;
        }
        
        .stats-icon-approved {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        
        .stats-icon-rejected {
            background-color: #ffebee;
            color: #f44336;
        }
        
        .stats-icon-total {
            background-color: #e3f2fd;
            color: #2196f3;
        }
        
        .stats-content {
            flex: 1;
        }
        
        .stats-number {
            font-size: 24px;
            font-weight: 500;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .stats-label {
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .status-pill {
            padding: 4px 8px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
            width: auto;
            box-sizing: border-box;
        }
        
        .status-pending {
            background-color: #fff8e1;
            color: #ff9800;
        }
        
        .status-approved {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        
        .status-rejected {
            background-color: #ffebee;
            color: #f44336;
        }
        
        .grid-filter {
            position: relative;
        }
        
        .grid-selector {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background-color: white;
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.2s;
        }
        
        .grid-selector:hover {
            border-color: #3498db;
        }
        
        .grid-dropdown {
            position: absolute;
            top: calc(100% + 5px);
            left: 0;
            width: 100%;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            z-index: 100;
            display: none;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .grid-option {
            padding: 12px 15px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .grid-option:hover {
            background-color: #f5f7fa;
        }
        
        .grid-option-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #e3f2fd;
            color: #2196f3;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
        }
        
        .grid-option-details {
            flex: 1;
        }
        
        .grid-option-name {
            font-weight: 500;
        }
        
        .grid-option-meta {
            color: #7f8c8d;
            font-size: 12px;
        }
        
        .grid-option.active {
            background-color: #e3f2fd;
        }
        
        .grid-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #e3f2fd;
            color: #2196f3;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
        }
        
        .selected-grid {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .tab-container {
            margin-top: 20px;
            margin-bottom: 25px;
        }
        
        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .panel-title {
            font-weight: 500;
            font-size: 18px;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .time-period {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .time-option {
            padding: 6px 12px;
            background-color: #f8f9fa;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            color: #7f8c8d;
        }
        
        .time-option:hover {
            background-color: #e9ecef;
        }
        
        .time-option.active {
            background-color: #e3f2fd;
            color: #2196f3;
        }
        
        .charts-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 25px;
        }
        
        .chart-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            padding: 20px;
            flex: 1;
            min-width: 300px;
            position: relative;
        }
        
        /* 添加画布容器样式，确保响应式行为 */
        .chart-container {
            position: relative;
            width: 100%;
            height: 250px;
        }
        
        /* 确保canvas元素完全填充其容器 */
        .chart-container canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .chart-title {
            font-weight: 500;
            margin-bottom: 15px;
            color: #34495e;
        }
        
        .chart-placeholder {
            height: 250px;
            background-color: #f8f9fa;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7f8c8d;
        }
        
        .tasks-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
        
        .tasks-table th {
            background-color: #f8f9fa;
            text-align: left;
            padding: 12px 15px;
            font-weight: 500;
            color: #2c3e50;
            border-bottom: 1px solid #eee;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .tasks-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            vertical-align: middle;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .tasks-table tr:hover {
            background-color: #f5f7fa;
        }
        
        .task-address {
            max-width: 350px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .date-cell {
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .priority-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .priority-high {
            background-color: #ffebee;
            color: #f44336;
        }
        
        .priority-medium {
            background-color: #fff8e1;
            color: #ff9800;
        }
        
        .priority-low {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        
        /* 添加悬停提示相关的样式 */
        .truncate {
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
        }
        
        .task-note {
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: help;
        }
        
        /* 给状态列和结果列固定宽度，防止换行 */
        .status-cell {
            width: 100px;
            min-width: 100px;
            max-width: 100px;
        }
        
        .result-cell {
            width: 100px;
            min-width: 100px;
            max-width: 100px;
        }
        
        /* 移动设备上的响应式调整 */
        @media (max-width: 768px) {
            .charts-container {
                flex-direction: column;
            }
            
            .chart-card {
                min-width: 100%;
            }
            
            .chart-container {
                height: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="title-section">
                <h1>网格员审批工作台</h1>
                <p class="subtitle">管理您负责的网格中的地址审核任务</p>
            </div>
            <div class="header-actions">
                <div class="grid-filter">
                    <div class="grid-selector" onclick="toggleGridDropdown()">
                        <div class="selected-grid">
                            <div class="grid-avatar">张</div>
                            <div>
                                <div class="grid-option-name">中关村网格</div>
                                <div class="grid-option-meta">海淀区 - 中关村街道</div>
                            </div>
                        </div>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    
                    <div class="grid-dropdown" id="gridDropdown">
                        <div class="grid-option active" onclick="selectGrid('grid1')">
                            <div class="grid-option-avatar">张</div>
                            <div class="grid-option-details">
                                <div class="grid-option-name">中关村网格</div>
                                <div class="grid-option-meta">海淀区 - 中关村街道</div>
                            </div>
                        </div>
                        <div class="grid-option" onclick="selectGrid('grid2')">
                            <div class="grid-option-avatar">李</div>
                            <div class="grid-option-details">
                                <div class="grid-option-name">五道口网格</div>
                                <div class="grid-option-meta">海淀区 - 五道口街道</div>
                            </div>
                        </div>
                        <div class="grid-option" onclick="selectGrid('grid3')">
                            <div class="grid-option-avatar">王</div>
                            <div class="grid-option-details">
                                <div class="grid-option-name">学院路网格</div>
                                <div class="grid-option-meta">海淀区 - 学院路街道</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <button class="btn btn-primary" onclick="navigateTo('pending-address-list.html', '待审核地址')">
                    <i class="fas fa-tasks"></i> 查看待审核地址
                </button>
            </div>
        </header>
        
        <!-- 仪表盘摘要 -->
        <div class="dashboard-summary">
            <div class="stats-card">
                <div class="stats-icon stats-icon-pending">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">12</div>
                    <div class="stats-label">待审核地址</div>
                </div>
            </div>
            
            <div class="stats-card">
                <div class="stats-icon stats-icon-approved">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">85</div>
                    <div class="stats-label">已通过地址</div>
                </div>
            </div>
            
            <div class="stats-card">
                <div class="stats-icon stats-icon-rejected">
                    <i class="fas fa-times-circle"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">7</div>
                    <div class="stats-label">已拒绝地址</div>
                </div>
            </div>
            
            <div class="stats-card">
                <div class="stats-icon stats-icon-total">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">104</div>
                    <div class="stats-label">总审核地址</div>
                </div>
            </div>
        </div>
        
        <!-- 统计图表 -->
        <div class="panel-header">
            <div class="panel-title">
                <i class="fas fa-chart-line"></i> 审核统计
            </div>
            
            <div class="time-period">
                <div class="time-option" onclick="changePeriod('week')">本周</div>
                <div class="time-option active" onclick="changePeriod('month')">本月</div>
                <div class="time-option" onclick="changePeriod('quarter')">本季度</div>
                <div class="time-option" onclick="changePeriod('year')">本年</div>
            </div>
        </div>
        
        <div class="charts-container">
            <div class="chart-card">
                <h4 class="chart-title">审核数量趋势</h4>
                <div class="chart-container">
                    <canvas id="trendChart"></canvas>
                </div>
            </div>
            
            <div class="chart-card">
                <h4 class="chart-title">审核结果分布</h4>
                <div class="chart-container">
                    <canvas id="distributionChart"></canvas>
                </div>
            </div>
        </div>
        
        <!-- 待处理任务 -->
        <div class="panel-header">
            <div class="panel-title">
                <i class="fas fa-tasks"></i> 待处理审核任务
            </div>
            
            <button class="btn btn-primary" onclick="navigateTo('pending-address-list.html', '待审核地址')">
                查看全部
            </button>
        </div>
        
        <div class="table-container">
            <table class="tasks-table">
                <thead>
                    <tr>
                        <th>地址</th>
                        <th width="120px">提交日期</th>
                        <th width="100px" class="status-cell">状态</th>
                        <th width="100px">优先级</th>
                        <th width="150px">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="task-address" title="山东省济南市历下区解放路30号山大花园社区A区8号楼2单元15层1502室">山东省济南市历下区解放路30号山大花园社区A区8号楼2单元15层1502室</div>
                        </td>
                        <td class="date-cell">2025-03-20</td>
                        <td class="status-cell"><span class="status-pill status-pending"><i class="fas fa-clock"></i> 待审核</span></td>
                        <td><span class="priority-badge priority-high">高优先级</span></td>
                        <td>
                            <button class="action-btn btn-view" onclick="navigateTo('pending-address-detail.html?id=1001', '地址详情')">查看</button>
                            <button class="action-btn btn-primary" onclick="navigateTo('pending-address-approve.html?id=1001', '审批地址')">审批</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="task-address" title="山东省济南市市中区经七路86号恒大城小区12栋3单元8楼802号">山东省济南市市中区经七路86号恒大城小区12栋3单元8楼802号</div>
                        </td>
                        <td class="date-cell">2025-03-19</td>
                        <td class="status-cell"><span class="status-pill status-pending"><i class="fas fa-clock"></i> 待审核</span></td>
                        <td><span class="priority-badge priority-medium">中优先级</span></td>
                        <td>
                            <button class="action-btn btn-view" onclick="navigateTo('pending-address-detail.html?id=1002', '地址详情')">查看</button>
                            <button class="action-btn btn-primary" onclick="navigateTo('pending-address-approve.html?id=1002', '审批地址')">审批</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="task-address" title="山东省济南市槐荫区经六路522号齐鲁花园小区7号楼1单元4层401室">山东省济南市槐荫区经六路522号齐鲁花园小区7号楼1单元4层401室</div>
                        </td>
                        <td class="date-cell">2025-03-18</td>
                        <td class="status-cell"><span class="status-pill status-pending"><i class="fas fa-clock"></i> 待审核</span></td>
                        <td><span class="priority-badge priority-low">低优先级</span></td>
                        <td>
                            <button class="action-btn btn-view" onclick="navigateTo('pending-address-detail.html?id=1003', '地址详情')">查看</button>
                            <button class="action-btn btn-primary" onclick="navigateTo('pending-address-approve.html?id=1003', '审批地址')">审批</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 最近审核历史 -->
        <div class="panel-header" style="margin-top: 30px;">
            <div class="panel-title">
                <i class="fas fa-history"></i> 最近审核历史
            </div>
            
            <button class="btn btn-default" onclick="navigateTo('review-history.html', '审核历史')">
                查看全部历史
            </button>
        </div>
        
        <div class="table-container">
            <table class="tasks-table">
                <thead>
                    <tr>
                        <th>地址</th>
                        <th width="120px">审核日期</th>
                        <th width="100px" class="result-cell">结果</th>
                        <th width="200px">备注</th>
                        <th width="100px">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="task-address" title="山东省济南市历城区花园路18号大学科技园小区5号楼2单元11层1102室">山东省济南市历城区花园路18号大学科技园小区5号楼2单元11层1102室</div>
                        </td>
                        <td class="date-cell">2025-03-17</td>
                        <td class="result-cell"><span class="status-pill status-approved"><i class="fas fa-check-circle"></i> 已通过</span></td>
                        <td><div class="task-note" title="符合实地核查结果">符合实地核查结果</div></td>
                        <td>
                            <button class="action-btn btn-view" onclick="navigateTo('pending-address-detail.html?id=1004', '地址详情')">查看</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="task-address" title="山东省济南市天桥区无影山中路122号阳光新城小区12号楼3单元8层802室">山东省济南市天桥区无影山中路122号阳光新城小区12号楼3单元8层802室</div>
                        </td>
                        <td class="date-cell">2025-03-16</td>
                        <td class="result-cell"><span class="status-pill status-rejected"><i class="fas fa-times-circle"></i> 已拒绝</span></td>
                        <td><div class="task-note" title="小区名称与实际不符">小区名称与实际不符</div></td>
                        <td>
                            <button class="action-btn btn-view" onclick="navigateTo('pending-address-detail.html?id=1005', '地址详情')">查看</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="task-address" title="山东省济南市章丘区双山街道双山大街555号泉城花园7栋1单元4楼401">山东省济南市章丘区双山街道双山大街555号泉城花园7栋1单元4楼401</div>
                        </td>
                        <td class="date-cell">2025-03-15</td>
                        <td class="result-cell"><span class="status-pill status-approved"><i class="fas fa-check-circle"></i> 已通过</span></td>
                        <td><div class="task-note" title="已修正门牌号格式">已修正门牌号格式</div></td>
                        <td>
                            <button class="action-btn btn-view" onclick="navigateTo('pending-address-detail.html?id=1006', '地址详情')">查看</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div id="customTooltip" style="display: none; position: absolute; background: rgba(0,0,0,0.8); color: white; padding: 8px 12px; border-radius: 4px; font-size: 13px; z-index: 1000; max-width: 300px; word-wrap: break-word;"></div>

    <script>
        // 存储图表当前周期，用于重绘
        let currentPeriod = 'month';
        
        // 页面加载完成后执行初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 点击页面其他区域关闭下拉菜单
            document.addEventListener('click', function(event) {
                const dropdown = document.getElementById('gridDropdown');
                const selector = document.querySelector('.grid-selector');
                
                if (!selector.contains(event.target) && !dropdown.contains(event.target)) {
                    dropdown.style.display = 'none';
                }
            });
            
            // 加载网格员数据
            loadGridData();
            
            // 自定义提示框功能
            const tooltip = document.getElementById('customTooltip');
            const truncatedElements = document.querySelectorAll('.task-address, .task-note');
            
            truncatedElements.forEach(element => {
                element.addEventListener('mouseenter', function(e) {
                    const text = this.getAttribute('title');
                    if(text) {
                        // 清除默认title提示
                        this.setAttribute('data-original-title', text);
                        this.removeAttribute('title');
                        
                        // 显示自定义提示
                        tooltip.textContent = text;
                        tooltip.style.display = 'block';
                        
                        // 计算位置
                        const rect = this.getBoundingClientRect();
                        tooltip.style.top = (rect.bottom + window.scrollY + 5) + 'px';
                        tooltip.style.left = (rect.left + window.scrollX) + 'px';
                    }
                });
                
                element.addEventListener('mouseleave', function() {
                    // 恢复title属性
                    const originalTitle = this.getAttribute('data-original-title');
                    if(originalTitle) {
                        this.setAttribute('title', originalTitle);
                        this.removeAttribute('data-original-title');
                    }
                    
                    // 隐藏提示
                    tooltip.style.display = 'none';
                });
            });
            
            // 默认绘制图表(本月)
            currentPeriod = 'month';
            resizeCharts();
            
            // 添加窗口大小变化事件监听
            window.addEventListener('resize', resizeCharts);
        });
        
        // 加载网格员数据
        function loadGridData() {
            console.log('加载网格员数据');
            
            // 实际项目中，这里应该从API获取网格员数据和审核统计
        }
        
        // 切换网格下拉菜单显示/隐藏
        function toggleGridDropdown() {
            const dropdown = document.getElementById('gridDropdown');
            
            if (dropdown.style.display === 'block') {
                dropdown.style.display = 'none';
            } else {
                dropdown.style.display = 'block';
            }
        }
        
        // 选择网格
        function selectGrid(gridId) {
            // 更新所有选项的选中状态
            const options = document.querySelectorAll('.grid-option');
            options.forEach(option => {
                option.classList.remove('active');
            });
            
            // 设置当前选中项
            const selectedOption = document.querySelector(`.grid-option[onclick="selectGrid('${gridId}')"]`);
            selectedOption.classList.add('active');
            
            // 更新选中项显示
            const selectedGrid = document.querySelector('.selected-grid');
            selectedGrid.innerHTML = selectedOption.innerHTML;
            
            // 关闭下拉菜单
            document.getElementById('gridDropdown').style.display = 'none';
            
            console.log(`已选择网格: ${gridId}`);
            
            // 实际项目中，这里应该根据选中的网格重新加载数据
            loadGridData();
        }
        
        // 切换时间周期
        function changePeriod(period) {
            // 更新所有时间选项的选中状态
            const options = document.querySelectorAll('.time-option');
            options.forEach(option => {
                option.classList.remove('active');
            });
            
            // 设置当前选中项
            const selectedOption = document.querySelector(`.time-option[onclick="changePeriod('${period}')"]`);
            selectedOption.classList.add('active');
            
            console.log(`已选择时间周期: ${period}`);
            
            // 更新当前周期并重绘图表
            currentPeriod = period;
            drawCharts(period);
        }
        
        // 图表绘制函数
        function drawCharts(period) {
            drawTrendChart(period);
            drawDistributionChart(period);
        }
        
        // 绘制审核数量趋势图
        function drawTrendChart(period) {
            const canvas = document.getElementById('trendChart');
            const ctx = canvas.getContext('2d');
            const dpr = window.devicePixelRatio || 1;
            
            // 应用设备像素比缩放
            ctx.scale(dpr, dpr);
            
            // 获取CSS像素尺寸
            const displayWidth = canvas.width / dpr;
            const displayHeight = canvas.height / dpr;
            
            // 清除画布
            ctx.clearRect(0, 0, displayWidth, displayHeight);
            
            // 模拟数据 - 在实际项目中这些数据应该从API获取
            let labels, data;
            
            if (period === 'week') {
                labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                data = [5, 8, 12, 7, 10, 3, 2];
            } else if (period === 'month') {
                labels = ['第1周', '第2周', '第3周', '第4周'];
                data = [25, 32, 28, 19];
            } else if (period === 'quarter') {
                labels = ['1月', '2月', '3月'];
                data = [85, 72, 93];
            } else {
                labels = ['一季度', '二季度', '三季度', '四季度'];
                data = [250, 180, 210, 320];
            }
            
            // 图表设置 - 使用相对尺寸
            const padding = Math.min(40, displayWidth * 0.1);
            const width = displayWidth - padding * 2;
            const height = displayHeight - padding * 2;
            const maxValue = Math.max(...data) * 1.2;
            
            // 绘制背景网格
            ctx.beginPath();
            ctx.fillStyle = '#f9f9f9';
            ctx.fillRect(padding, padding, width, height);
            ctx.stroke();
            
            // 绘制坐标轴
            ctx.beginPath();
            ctx.strokeStyle = '#ccc';
            ctx.lineWidth = 2;
            ctx.moveTo(padding, padding);
            ctx.lineTo(padding, displayHeight - padding);
            ctx.lineTo(displayWidth - padding, displayHeight - padding);
            ctx.stroke();
            
            // 绘制横坐标标签
            ctx.fillStyle = '#34495e';
            ctx.font = '12px Arial';
            ctx.textAlign = 'center';
            
            const xStep = width / (labels.length - 1);
            labels.forEach((label, i) => {
                const x = padding + i * xStep;
                ctx.fillText(label, x, displayHeight - padding / 2);
                
                // 绘制网格线（垂直）
                ctx.beginPath();
                ctx.strokeStyle = '#e8e8e8';
                ctx.setLineDash([2, 2]);
                ctx.moveTo(x, displayHeight - padding);
                ctx.lineTo(x, padding);
                ctx.stroke();
                ctx.setLineDash([]);
            });
            
            // 绘制网格线和纵坐标标签
            const ySteps = 5;
            ctx.textAlign = 'right';
            
            for (let i = 0; i <= ySteps; i++) {
                const y = displayHeight - padding - (i * height / ySteps);
                const value = Math.round(maxValue * i / ySteps);
                
                // 网格线（水平）
                ctx.beginPath();
                ctx.strokeStyle = '#e8e8e8';
                ctx.setLineDash([2, 2]);
                ctx.moveTo(padding, y);
                ctx.lineTo(displayWidth - padding, y);
                ctx.stroke();
                ctx.setLineDash([]);
                
                // 纵坐标标签
                ctx.fillStyle = '#34495e';
                ctx.fillText(value, padding - 10, y + 4);
            }
            
            // 创建渐变填充
            const gradient = ctx.createLinearGradient(0, padding, 0, displayHeight - padding);
            gradient.addColorStop(0, 'rgba(52, 152, 219, 0.3)');
            gradient.addColorStop(1, 'rgba(52, 152, 219, 0.0)');
            
            // 绘制区域填充
            ctx.beginPath();
            ctx.moveTo(padding, displayHeight - padding);
            
            data.forEach((value, i) => {
                const x = padding + i * xStep;
                const y = displayHeight - padding - (value / maxValue * height);
                ctx.lineTo(x, y);
            });
            
            ctx.lineTo(padding + (labels.length - 1) * xStep, displayHeight - padding);
            ctx.closePath();
            ctx.fillStyle = gradient;
            ctx.fill();
            
            // 绘制数据线
            ctx.beginPath();
            ctx.strokeStyle = '#3498db';
            ctx.lineWidth = 3;
            
            data.forEach((value, i) => {
                const x = padding + i * xStep;
                const y = displayHeight - padding - (value / maxValue * height);
                
                if (i === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
            });
            
            ctx.stroke();
            
            // 绘制数据点和数值标签
            data.forEach((value, i) => {
                const x = padding + i * xStep;
                const y = displayHeight - padding - (value / maxValue * height);
                
                // 外圆
                ctx.beginPath();
                ctx.fillStyle = '#fff';
                ctx.arc(x, y, 6, 0, Math.PI * 2);
                ctx.fill();
                
                // 内圆
                ctx.beginPath();
                ctx.fillStyle = '#3498db';
                ctx.arc(x, y, 4, 0, Math.PI * 2);
                ctx.fill();
                
                // 数值标签
                ctx.fillStyle = '#2c3e50';
                ctx.font = 'bold 12px Arial';
                ctx.textAlign = 'center';
                ctx.fillText(value.toString(), x, y - 15);
            });
            
            // 添加图表标题
            ctx.fillStyle = '#2c3e50';
            ctx.font = 'bold 14px Arial';
            ctx.textAlign = 'center';
            ctx.fillText(`${period === 'week' ? '本周' : period === 'month' ? '本月' : period === 'quarter' ? '本季度' : '本年'}审核数量趋势`, displayWidth / 2, 20);
            
            // 设置鼠标悬停效果
            canvas.onmousemove = function(e) {
                const rect = canvas.getBoundingClientRect();
                const mouseX = e.clientX - rect.left;
                
                // 重绘图表以清除之前的高亮效果
                drawTrendChart(period);
                
                // 寻找最接近的数据点
                let closestPointIndex = -1;
                let closestDistance = Infinity;
                
                data.forEach((value, i) => {
                    const x = padding + i * xStep;
                    const distance = Math.abs(mouseX - x);
                    
                    if (distance < closestDistance && distance < 30) {
                        closestDistance = distance;
                        closestPointIndex = i;
                    }
                });
                
                // 绘制高亮效果
                if (closestPointIndex !== -1) {
                    const x = padding + closestPointIndex * xStep;
                    const y = displayHeight - padding - (data[closestPointIndex] / maxValue * height);
                    
                    // 高亮垂直线
                    ctx.beginPath();
                    ctx.strokeStyle = 'rgba(52, 152, 219, 0.5)';
                    ctx.setLineDash([5, 3]);
                    ctx.lineWidth = 1;
                    ctx.moveTo(x, displayHeight - padding);
                    ctx.lineTo(x, padding);
                    ctx.stroke();
                    ctx.setLineDash([]);
                    
                    // 高亮数据点
                    ctx.beginPath();
                    ctx.fillStyle = '#fff';
                    ctx.strokeStyle = '#3498db';
                    ctx.lineWidth = 2;
                    ctx.arc(x, y, 8, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.stroke();
                    
                    // 突出显示数值
                    ctx.fillStyle = '#fff';
                    ctx.strokeStyle = '#3498db';
                    ctx.lineWidth = 1;
                    
                    const tooltipWidth = 80;
                    const tooltipHeight = 40;
                    const tooltipX = x - tooltipWidth / 2;
                    const tooltipY = y - tooltipHeight - 10;
                    
                    // 绘制提示框
                    ctx.beginPath();
                    ctx.roundRect(tooltipX, tooltipY, tooltipWidth, tooltipHeight, 5);
                    ctx.fill();
                    ctx.stroke();
                    
                    // 绘制提示框文本
                    ctx.fillStyle = '#3498db';
                    ctx.font = 'bold 14px Arial';
                    ctx.textAlign = 'center';
                    ctx.fillText(data[closestPointIndex].toString(), x, tooltipY + 20);
                    ctx.font = '12px Arial';
                    ctx.fillText(labels[closestPointIndex], x, tooltipY + 35);
                }
            };
            
            // 移出图表时清除高亮效果
            canvas.onmouseout = function() {
                drawTrendChart(period);
                canvas.onmousemove = null;
            };
        }
        
        // 优化审核结果分布图表函数
        function drawDistributionChart(period) {
            const canvas = document.getElementById('distributionChart');
            const ctx = canvas.getContext('2d');
            const dpr = window.devicePixelRatio || 1;
            
            // 清除画布并重置变换
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.scale(dpr, dpr);
            
            // 获取CSS像素尺寸
            const displayWidth = canvas.width / dpr;
            const displayHeight = canvas.height / dpr;
            
            // 模拟数据 - 在实际项目中这些数据应该从API获取
            let approved, rejected, pending;
            
            if (period === 'week') {
                approved = 25;
                rejected = 7;
                pending = 12;
            } else if (period === 'month') {
                approved = 85;
                rejected = 17;
                pending = 12;
            } else if (period === 'quarter') {
                approved = 210;
                rejected = 35;
                pending = 25;
            } else {
                approved = 850;
                rejected = 120;
                pending = 104;
            }
            
            const total = approved + rejected + pending;
            
            // 设置颜色
            const colors = {
                approved: '#4caf50',
                rejected: '#f44336',
                pending: '#ff9800'
            };
            
            // 数据项配置
            const items = [
                { name: '已通过', value: approved, percent: Math.round(approved / total * 100), color: colors.approved },
                { name: '已拒绝', value: rejected, percent: Math.round(rejected / total * 100), color: colors.rejected },
                { name: '待审核', value: pending, percent: Math.round(pending / total * 100), color: colors.pending }
            ];
            
            // 计算图表区域
            const titleHeight = 40;
            const legendHeight = 40;
            const margin = 20;
            
            // 饼图设置
            const centerX = displayWidth / 2;
            const centerY = (displayHeight - legendHeight) / 2 + 10;
            const chartHeight = displayHeight - titleHeight - legendHeight - margin * 2;
            const radius = Math.min(centerX - margin, chartHeight / 2) * 1.2;
            const innerRadius = radius * 0.6; // 环形图内圆半径
            
            // 绘制标题
            ctx.fillStyle = '#2c3e50';
            ctx.font = 'bold 16px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText(`${period === 'week' ? '本周' : period === 'month' ? '本月' : period === 'quarter' ? '本季度' : '本年'}审核结果分布`, centerX, 15);
            
            // 绘制环形图背景
            ctx.shadowColor = 'rgba(0, 0, 0, 0.1)';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 4;
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
            ctx.fillStyle = '#f8f8f8';
            ctx.fill();
            
            // 重置阴影
            ctx.shadowColor = 'transparent';
            ctx.shadowBlur = 0;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            
            // 绘制各个扇区
            let startAngle = -Math.PI / 2;
            items.forEach(item => {
                const sliceAngle = (item.value / total) * (Math.PI * 2);
                const endAngle = startAngle + sliceAngle;
                
                // 绘制环形扇区
                ctx.beginPath();
                ctx.arc(centerX, centerY, radius, startAngle, endAngle);
                ctx.arc(centerX, centerY, innerRadius, endAngle, startAngle, true);
                ctx.closePath();
                
                ctx.fillStyle = item.color;
                ctx.fill();
                ctx.lineWidth = 1;
                ctx.strokeStyle = '#fff';
                ctx.stroke();
                
                // 计算百分比标签位置
                const midAngle = startAngle + sliceAngle / 2;
                const labelRadius = (radius + innerRadius) / 2;
                const labelX = centerX + Math.cos(midAngle) * labelRadius;
                const labelY = centerY + Math.sin(midAngle) * labelRadius;
                
                // 只显示超过8%的百分比标签，避免文字重叠
                if (item.percent >= 8) {
                    ctx.fillStyle = '#fff';
                    ctx.font = 'bold 14px Arial';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText(`${item.percent}%`, labelX, labelY);
                }
                
                startAngle = endAngle;
            });
            
            // 绘制中心圆
            ctx.beginPath();
            ctx.arc(centerX, centerY, innerRadius, 0, Math.PI * 2);
            ctx.fillStyle = '#fff';
            ctx.fill();
            ctx.lineWidth = 1;
            ctx.strokeStyle = '#f0f0f0';
            ctx.stroke();
            
            // 绘制中心信息
            ctx.fillStyle = '#2c3e50';
            ctx.font = '14px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(`总数`, centerX, centerY - 15);
            ctx.font = 'bold 20px Arial';
            ctx.fillText(`${total}`, centerX, centerY + 15);
            
            // 绘制图例 - 确保在所有屏幕尺寸上都能正确显示
            const legendTop = displayHeight - legendHeight;
            
            // 计算图例项的宽度和总宽度
            let legendItems = [];
            let totalWidth = 0;
            
            items.forEach(item => {
                // 预计算每个图例的文本宽度
                ctx.font = '12px Arial';
                const textWidth = ctx.measureText(`${item.name}: ${item.value} (${item.percent}%)`).width;
                const itemWidth = textWidth + 30; // 文本宽度 + 色块 + 间距
                
                legendItems.push({
                    ...item,
                    width: itemWidth
                });
                
                totalWidth += itemWidth + 10; // 加上图例项之间的间距
            });
            
            // 确定图例布局方式
            let legendLayout = 'horizontal';
            if (totalWidth > displayWidth - 40) {
                legendLayout = 'vertical';
            }
            
            if (legendLayout === 'horizontal') {
                // 图例水平居中
                let startX = (displayWidth - totalWidth) / 2;
                
                legendItems.forEach(item => {
                    // 绘制颜色方块
                    ctx.fillStyle = item.color;
                    ctx.fillRect(startX, legendTop + 12, 12, 12);
                    
                    // 绘制文本
                    ctx.fillStyle = '#34495e';
                    ctx.font = '12px Arial';
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'middle';
                    ctx.fillText(`${item.name}: ${item.value} (${item.percent}%)`, startX + 18, legendTop + 18);
                    
                    startX += item.width + 10;
                });
            } else {
                // 垂直布局图例
                let itemHeight = 22;
                let totalHeight = itemHeight * legendItems.length;
                let startY = displayHeight - totalHeight - 10;
                let startX = 20;
                
                if (displayWidth >= 400) {
                    // 如果屏幕宽度足够，使用两列布局
                    const halfItems = Math.ceil(legendItems.length / 2);
                    totalHeight = itemHeight * halfItems;
                    startY = displayHeight - totalHeight - 10;
                    
                    legendItems.forEach((item, index) => {
                        const col = Math.floor(index / halfItems);
                        const row = index % halfItems;
                        
                        const x = startX + col * (displayWidth / 2 - 40);
                        const y = startY + row * itemHeight;
                        
                        // 绘制颜色方块
                        ctx.fillStyle = item.color;
                        ctx.fillRect(x, y, 12, 12);
                        
                        // 绘制文本
                        ctx.fillStyle = '#34495e';
                        ctx.font = '12px Arial';
                        ctx.textAlign = 'left';
                        ctx.textBaseline = 'middle';
                        ctx.fillText(`${item.name}: ${item.value} (${item.percent}%)`, x + 18, y + 6);
                    });
                } else {
                    // 单列垂直布局
                    legendItems.forEach((item, index) => {
                        // 绘制颜色方块
                        ctx.fillStyle = item.color;
                        ctx.fillRect(startX, startY + index * itemHeight, 12, 12);
                        
                        // 绘制文本
                        ctx.fillStyle = '#34495e';
                        ctx.font = '12px Arial';
                        ctx.textAlign = 'left';
                        ctx.textBaseline = 'middle';
                        ctx.fillText(`${item.name}: ${item.value} (${item.percent}%)`, startX + 18, startY + index * itemHeight + 6);
                    });
                }
            }
            
            // 设置鼠标交互
            canvas.onmousemove = function(e) {
                const rect = canvas.getBoundingClientRect();
                const mouseX = e.clientX - rect.left;
                const mouseY = e.clientY - rect.top;
                
                // 将坐标转换为相对于中心点的位置
                const dx = mouseX - centerX * (rect.width / displayWidth);
                const dy = mouseY - centerY * (rect.height / displayHeight);
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                // 转换为相对于画布的距离
                const canvasDistance = distance * (radius / Math.min(rect.width, rect.height) * 2);
                
                // 如果鼠标在环形区域内
                if (canvasDistance <= radius && canvasDistance >= innerRadius) {
                    // 计算角度
                    let angle = Math.atan2(dy, dx);
                    if (angle < 0) angle += Math.PI * 2;
                    angle = (angle + Math.PI / 2) % (Math.PI * 2);
                    
                    // 查找对应的扇区
                    let currentAngle = -Math.PI / 2;
                    let hoveredItem = null;
                    
                    for (const item of items) {
                        const sliceAngle = (item.value / total) * (Math.PI * 2);
                        if (angle >= currentAngle && angle < currentAngle + sliceAngle) {
                            hoveredItem = item;
                            break;
                        }
                        currentAngle += sliceAngle;
                    }
                    
                    if (hoveredItem) {
                        // 绘制高亮和提示框
                        showHighlightAndTooltip(hoveredItem, mouseX, mouseY);
                    }
                } else {
                    // 鼠标不在环形区域，重绘原始图表
                    drawDistributionChart(period);
                }
            };
            
            // 高亮扇区并显示提示框
            function showHighlightAndTooltip(hoveredItem, mouseX, mouseY) {
                // 清除画布
                ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
                
                // 重绘标题
                ctx.fillStyle = '#2c3e50';
                ctx.font = 'bold 16px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'top';
                ctx.fillText(`${period === 'week' ? '本周' : period === 'month' ? '本月' : period === 'quarter' ? '本季度' : '本年'}审核结果分布`, centerX, 15);
                
                // 重绘环形图背景
                ctx.beginPath();
                ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
                ctx.fillStyle = '#f8f8f8';
                ctx.fill();
                
                // 重绘所有扇区
                let startAngle = -Math.PI / 2;
                items.forEach(item => {
                    const sliceAngle = (item.value / total) * (Math.PI * 2);
                    const endAngle = startAngle + sliceAngle;
                    
                    // 绘制环形扇区
                    ctx.beginPath();
                    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
                    ctx.arc(centerX, centerY, innerRadius, endAngle, startAngle, true);
                    ctx.closePath();
                    
                    // 如果是悬停项，突出显示
                    if (item === hoveredItem) {
                        // 绘制扇区突出效果
                        ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
                        ctx.shadowBlur = 10;
                        ctx.fillStyle = item.color;
                    } else {
                        // 其他扇区变暗
                        ctx.fillStyle = item.color;
                        ctx.globalAlpha = 0.7;
                    }
                    
                    ctx.fill();
                    ctx.globalAlpha = 1.0;
                    ctx.shadowColor = 'transparent';
                    ctx.shadowBlur = 0;
                    
                    // 描边
                    ctx.lineWidth = 1;
                    ctx.strokeStyle = '#fff';
                    ctx.stroke();
                    
                    // 绘制百分比标签
                    if (item.percent >= 8) {
                        const midAngle = startAngle + sliceAngle / 2;
                        const labelRadius = (radius + innerRadius) / 2;
                        const labelX = centerX + Math.cos(midAngle) * labelRadius;
                        const labelY = centerY + Math.sin(midAngle) * labelRadius;
                        
                        ctx.fillStyle = '#fff';
                        ctx.font = 'bold 14px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText(`${item.percent}%`, labelX, labelY);
                    }
                    
                    startAngle = endAngle;
                });
                
                // 重绘中心圆
                ctx.beginPath();
                ctx.arc(centerX, centerY, innerRadius, 0, Math.PI * 2);
                ctx.fillStyle = '#fff';
                ctx.fill();
                ctx.lineWidth = 1;
                ctx.strokeStyle = '#f0f0f0';
                ctx.stroke();
                
                // 重绘中心信息
                ctx.fillStyle = '#2c3e50';
                ctx.font = '14px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(`总数`, centerX, centerY - 15);
                ctx.font = 'bold 20px Arial';
                ctx.fillText(`${total}`, centerX, centerY + 15);
                
                // 重绘图例
                if (legendLayout === 'horizontal') {
                    let startX = (displayWidth - totalWidth) / 2;
                    
                    legendItems.forEach(item => {
                        ctx.fillStyle = item === hoveredItem ? item.color : item.color;
                        ctx.globalAlpha = item === hoveredItem ? 1.0 : 0.7;
                        ctx.fillRect(startX, legendTop + 12, 12, 12);
                        
                        ctx.globalAlpha = 1.0;
                        ctx.fillStyle = '#34495e';
                        ctx.font = '12px Arial';
                        ctx.textAlign = 'left';
                        ctx.textBaseline = 'middle';
                        ctx.fillText(`${item.name}: ${item.value} (${item.percent}%)`, startX + 18, legendTop + 18);
                        
                        startX += item.width + 10;
                    });
                } else {
                    // 垂直布局图例 (同上，根据屏幕宽度判断是一列还是两列)
                    if (displayWidth >= 400) {
                        const halfItems = Math.ceil(legendItems.length / 2);
                        const itemHeight = 22;
                        const totalHeight = itemHeight * halfItems;
                        const startY = displayHeight - totalHeight - 10;
                        
                        legendItems.forEach((item, index) => {
                            const col = Math.floor(index / halfItems);
                            const row = index % halfItems;
                            
                            const x = startX + col * (displayWidth / 2 - 40);
                            const y = startY + row * itemHeight;
                            
                            ctx.fillStyle = item === hoveredItem ? item.color : item.color;
                            ctx.globalAlpha = item === hoveredItem ? 1.0 : 0.7;
                            ctx.fillRect(x, y, 12, 12);
                            
                            ctx.globalAlpha = 1.0;
                            ctx.fillStyle = '#34495e';
                            ctx.font = '12px Arial';
                            ctx.textAlign = 'left';
                            ctx.textBaseline = 'middle';
                            ctx.fillText(`${item.name}: ${item.value} (${item.percent}%)`, x + 18, y + 6);
                        });
                    } else {
                        const itemHeight = 22;
                        const totalHeight = itemHeight * legendItems.length;
                        const startY = displayHeight - totalHeight - 10;
                        const startX = 20;
                        
                        legendItems.forEach((item, index) => {
                            ctx.fillStyle = item === hoveredItem ? item.color : item.color;
                            ctx.globalAlpha = item === hoveredItem ? 1.0 : 0.7;
                            ctx.fillRect(startX, startY + index * itemHeight, 12, 12);
                            
                            ctx.globalAlpha = 1.0;
                            ctx.fillStyle = '#34495e';
                            ctx.font = '12px Arial';
                            ctx.textAlign = 'left';
                            ctx.textBaseline = 'middle';
                            ctx.fillText(`${item.name}: ${item.value} (${item.percent}%)`, startX + 18, startY + index * itemHeight + 6);
                        });
                    }
                }
                
                // 计算并绘制提示框
                // 调整tooltip位置确保在画布内
                const tooltipWidth = 120;
                const tooltipHeight = 80;
                
                // 获取鼠标在画布上的相对位置
                const rect = canvas.getBoundingClientRect();
                let tooltipX = (mouseX / rect.width) * displayWidth + 15;
                let tooltipY = (mouseY / rect.height) * displayHeight - 15;
                
                // 确保提示框不超出画布右边界
                if (tooltipX + tooltipWidth > displayWidth) {
                    tooltipX = (mouseX / rect.width) * displayWidth - tooltipWidth - 15;
                }
                
                // 确保提示框不超出画布上边界
                if (tooltipY - tooltipHeight < 0) {
                    tooltipY = (mouseY / rect.height) * displayHeight + 15;
                }
                
                // 确保提示框不超出画布下边界
                if (tooltipY + tooltipHeight > displayHeight) {
                    tooltipY = (mouseY / rect.height) * displayHeight - tooltipHeight - 15;
                }
                
                // 绘制提示框
                ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
                ctx.beginPath();
                // 使用圆角矩形
                ctx.moveTo(tooltipX + 5, tooltipY);
                ctx.lineTo(tooltipX + tooltipWidth - 5, tooltipY);
                ctx.quadraticCurveTo(tooltipX + tooltipWidth, tooltipY, tooltipX + tooltipWidth, tooltipY + 5);
                ctx.lineTo(tooltipX + tooltipWidth, tooltipY + tooltipHeight - 5);
                ctx.quadraticCurveTo(tooltipX + tooltipWidth, tooltipY + tooltipHeight, tooltipX + tooltipWidth - 5, tooltipY + tooltipHeight);
                ctx.lineTo(tooltipX + 5, tooltipY + tooltipHeight);
                ctx.quadraticCurveTo(tooltipX, tooltipY + tooltipHeight, tooltipX, tooltipY + tooltipHeight - 5);
                ctx.lineTo(tooltipX, tooltipY + 5);
                ctx.quadraticCurveTo(tooltipX, tooltipY, tooltipX + 5, tooltipY);
                ctx.closePath();
                ctx.fill();
                
                // 绘制提示框内容
                ctx.fillStyle = '#fff';
                ctx.textAlign = 'left';
                ctx.textBaseline = 'top';
                ctx.font = 'bold 13px Arial';
                ctx.fillText(hoveredItem.name, tooltipX + 10, tooltipY + 10);
                ctx.font = '12px Arial';
                ctx.fillText(`数量: ${hoveredItem.value}`, tooltipX + 10, tooltipY + 32);
                ctx.fillText(`占比: ${hoveredItem.percent}%`, tooltipX + 10, tooltipY + 52);
            }
            
            // 移出时重置
            canvas.onmouseout = function() {
                drawDistributionChart(period);
            };
        }
        
        // 添加响应式处理函数
        function resizeCharts() {
            // 获取设备像素比
            const dpr = window.devicePixelRatio || 1;
            
            // 处理趋势图canvas
            const trendCanvas = document.getElementById('trendChart');
            const trendContainer = trendCanvas.parentElement;
            const trendWidth = trendContainer.clientWidth;
            const trendHeight = trendContainer.clientHeight;
            
            // 设置canvas元素的大小（实际渲染大小）
            trendCanvas.width = trendWidth * dpr;
            trendCanvas.height = trendHeight * dpr;
            
            // 处理分布图canvas
            const distributionCanvas = document.getElementById('distributionChart');
            const distributionContainer = distributionCanvas.parentElement;
            const distributionWidth = distributionContainer.clientWidth;
            const distributionHeight = distributionContainer.clientHeight;
            
            // 设置canvas元素的大小（实际渲染大小）
            distributionCanvas.width = distributionWidth * dpr;
            distributionCanvas.height = distributionHeight * dpr;
            
            // 绘制图表
            drawCharts(currentPeriod);
        }
    </script>
</body>
</html> 